<!--  -->
<template>
	<div class="tab-change">
		<div
			v-for="item in changedOrderList"
			:key="item.value"
			class="tab-item"
			:class="{ active: item.value === currentIndex }"
			@click="tabChange(item.value)"
		>
			<el-badge
				:class="{ 'special-item': item.num < 10 }"
				class="item"
				:value="item.num > 99 ? '99+' : item.num"
				:hidden="!([2, 3, 4].includes(item.value) && item.num)"
			>
				{{ item.label }}
			</el-badge>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { watchEffect,watch } from 'vue';

const emit = defineEmits(['tabChange']);

const props = defineProps({
	orderStatics: {
		type: Object,
		default: {},
	},
	defaultActivity: {
		type: Number,
		default: 0,
	},
});

let currentIndex = ref(0) 
let changedOrderList = ref<any>([
	{
		label: '全部订单',
		value: 0,
	},
	{
		label: '待接单',
		value: 2,
		num: 0,
	},
	{
		label: '待派送',
		value: 3,
		num: 0,
	},
	{
		label: '派送中',
		value: 4,
		num: 0,
	},
	{
		label: '已完成',
		value: 5,
	},
	{
		label: '已取消',
		value: 6,
	},
]);

watch(() => props.defaultActivity,() => {
	currentIndex.value = Number(props.defaultActivity);
})

watchEffect(() => {
  changedOrderList.value[1].num = props.orderStatics.toBeConfirmed
  changedOrderList.value[2].num = props.orderStatics.confirmed
  changedOrderList.value[3].num = props.orderStatics.deliveryInProgress
});


const tabChange = (activeIndex: number) => {
	currentIndex.value = activeIndex;
	emit('tabChange', activeIndex);
};
</script>
<style lang="scss">
.tab-change {
	display: flex;
	border-radius: 4px;
	margin-bottom: 20px;

	.tab-item {
		width: 120px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		color: #333;
		border: 1px solid #e5e4e4;
		background-color: white;
		border-left: none;
		cursor: pointer;
		.special-item {
			.el-badge__content {
				width: 20px;
				padding: 0 5px;
			}
		}
		.item {
			.el-badge__content {
				background-color: #fd3333 !important;
				line-height: 18px;
				height: auto;
				min-width: 18px;
				min-height: 18px;
				// border-radius: 50%;
			}
			.el-badge__content.is-fixed {
				top: 14px;
				right: 2px;
			}
		}
	}
	.active {
		background-color: #ffc200;
		font-weight: bold;
	}
	.tab-item:first-child {
		border-left: 1px solid #e5e4e4;
	}
}
</style>
